<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-button
          type="primary"
          icon="el-icon-plus"
          :disabled="!cartGory3Id"
          @click="$emit('update:visible', true)"
          >添加属性</el-button
        >
      </div>
      <!-- 表格 -->
      <el-table :data="attrList" border style="width: 100%">
        <!-- 序号 -->
        <el-table-column prop="index" label="序号" width="50" type="index">
        </el-table-column>
        <!-- 属性名称 -->
        <el-table-column prop="attrName" label="属性名称" width="400">
        </el-table-column>
        <!-- 属性列表 -->

        <el-table-column prop="attrValueList" label="属性列表" width="400">
          <template v-slot="{ row }">
            <el-tag v-for="(List, index) in row.attrValueList" :key="index">{{
              List.valueName
            }}</el-tag>
          </template>
        </el-table-column>

        <!-- 操作栏 -->
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <!-- 修改 -->
            <el-button
              type="warning"
              icon="el-icon-edit"
              size="mini"
              @click="reviseAttr(row)"
            ></el-button>
            <!-- 删除 -->
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="delOne(row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import { dleAttr } from "@/api/attr";
export default {
  name: "AttrList",
  methods: {
    ...mapActions("cartgory", ["setAttr"]),
    //单项删除
    async delOne(row) {
      // console.log(row.id);
      await dleAttr(row.id);
      if (this.cartGory3Id) {
        this.setAttr();
      }
    },
    //修改
    reviseAttr(row) {
      let array = row.attrValueList.map((item) => {
        return {
          attrValueName: item.valueName,
          isShow: false,
        };
      });
      console.log(row);
      let attrName = row.attrName;
      this.$revise.newData = { array, attrName, attrId: row.id };
      this.$emit("update:visible", true);
    },
  },
  //每次挂载重新发送请求数据
  mounted() {
    if (this.cartGory3Id) {
      this.setAttr();
    }
  },
  computed: {
    ...mapState("cartgory", ["attrList", "cartGory3Id"]),
  },
  watch: {
    cartGory3Id: {
      handler() {
        if (this.cartGory3Id) {
          this.setAttr();
        }
      },
      immediate: true,
    },
  },
};
</script>

<style scoped>
.box-card {
  margin: 10px;
}
</style>